/**
 * Created by Kimi on 2017/5/16.
 */
'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    DatePickerIOS,
    Button,
    ScrollView,
    TouchableOpacity,
    TouchableHighlight,

} from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';

const DEMO_OPTIONS_1 = ['option 1', 'option 2', 'option 3', 'option 4', 'option 5', 'option 6', 'option 7', 'option 8', 'option 9'];



export default class leave extends Component {

    constructor(props) {
        super(props);

        this.state = {
            dropdown_4_options: null,
            dropdown_4_defaultValue: 'loading...',
            dropdown_6_icon_heart: true,
        };
    }

    render() {
        return(

            <View style={styles.row}>
                <ScrollView ref={el => this._scrollView = el}
                            style={styles.scrollView}
                            contentContainerStyle={styles.contentContainer}
                            showsVerticalScrollIndicator={true}
                            scrollEventThrottle={1}>
                    <Text>
                        {'请选择.'}
                    </Text>
                    <ModalDropdown ref={el => this._dropdown_3 = el}
                                   style={styles.dropdown_3}
                                   options={DEMO_OPTIONS_1}
                                   adjustFrame={style => this._dropdown_3_adjustFrame(style)}
                                   dropdownTextStyle={styles.dropdown_3_dropdownTextStyle}
                                   dropdownTextHighlightStyle={styles.dropdown_3_dropdownTextHighlightStyle}
                    />
                </ScrollView>
            </View>

        );


    }
    _dropdown_3_adjustFrame(style) {
        console.log(`frameStyle={width:${style.width}, height:${style.height}, top:${style.top}, left:${style.left}, right:${style.right}}`);
        style.top -= 15;
        style.left += 150;
        return style;
    }



}
const styles = StyleSheet.create({

    bgView: {
        width:375,
        height:667,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
    },

    contentText: {
        color: '#dc143c',
        textAlign: 'center',
        height:50,
        fontSize:20,
        // marginTop: 100,
    },
    container: {
        flex: 1,
    },
    row: {
        flex: 1,
        flexDirection: 'row',
    },
    cell: {
        flex: 1,
        borderWidth: StyleSheet.hairlineWidth,
    },
    scrollView: {
        flex: 1,
    },
    contentContainer: {
        height: 500,
        paddingVertical: 100,
        paddingLeft: 20,
    },
    textButton: {
        color: 'deepskyblue',
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: 'deepskyblue',
        margin: 2,
    },
    dropdown_3: {
        width: 150,
        borderColor: 'lightgray',
        borderWidth: 1,
        borderRadius: 1,
    },
    dropdown_3_dropdownTextStyle: {
        backgroundColor: '#000',
        color: '#fff'
    },
    dropdown_3_dropdownTextHighlightStyle: {
        backgroundColor: '#fff',
        color: '#000'
    },

});

module.exports = leave;